<template>
	<view>
		<view style="width: 100vw;height: 20vh;background-color: #EDEDED;display: flex;">
			<view style="width: 30vw;height: 20vh;line-height: 20vh;text-align: center;">充值方式</view>
			<view style="width: 70vw;height: 20vh;">
				<view style="width: 70vw;margin-top: 8vh;display: flex;">
					<view style="width: 6vw;height: 5vh;">
						<image src="/static/logo.png" style="width: 4vw;height: 3vh;" mode=""></image>
					</view>
					<view style="font-weight: bold;">建设银行(3183)</view>
					<view style="margin-left: 20vw;">></view>
				</view>
				<view style="width: 70vw;margin-left: 6vw;font-size: 0.7rem;font-weight: bold; color: #999;">
					单日交易限额￥50000.00</view>
			</view>
		</view>
		<!-- 输入金额 -->
		<view style="width: 100vw;height: 60vh;background-color: #fff;border-radius:35px;">
			<view
				style="width: 90vw;margin-left: 8vw; font-weight: bold;font-size: 0.8rem;height: 10vh;line-height: 10vh;">
				充值金额</view>
			<view
				style="width: 96vw;margin-left: 4vw;font-size: 1.3rem;display: flex;margin-top: 3vh;height: 7vh;border-bottom: solid 1px #999;">
				￥
				<input @click="receiveBtn" type="text" value="" style="border: none;" v-model="passwordList">
			</view>
		</view>

		<!-- 键盘 -->

		<uni-popup ref="popup" type="center">
			<view
				style="width: 94vw;height: 50vh;background-color: #F1F1F1;margin-left: 3vw;border-radius: 10px;position: absolute;top: 50vh;">
				<!-- 标题 -->
				<view style="width: 94vw;height: 5vh;line-height: 5vh;display: flex;border-bottom: solid 1px #ccc;">
					<view style="width: 10vw;height: 5vh;line-height: 5vh;text-align: center;">x</view>
					<view style="width: 82vw;height: 5vh;line-height: 5vh;text-align: center;">请输入支付密码</view>
				</view>
				<!-- 按键框 -->
				<view style="width: 94vw;height: 30vh;display: flex;flex-wrap: wrap;">
					<view @click="inputBtn(index)"
						style="height: 7vh;width: 30vw;border-bottom: solid 1px #ccc;border-right: solid 1px #ccc; text-align: center;line-height: 7vh;"
						v-for="(item,index) in passwordBtn" :key="index">
						{{item}}
					</view>
					<!-- 确定按钮 -->
					<view @click="ZfpasswordBtn"
						style="width: 80vw;margin-left: 8vw;height: 6vh;margin-top: 2vh;border-radius: 15px; background-color: #00BA0C;color: #fff;text-align: center;line-height: 6vh;">
						确定</view>

				</view>
			</view>
		</uni-popup>

		<!-- 输入密码信息 -->

		<view v-if="isZfpassword"
			style="z-index: 999; width: 60vw;margin-left: 20vw;background-color: #F1F1F1;position: absolute;top: 21vh; height: 30vh;border-radius: 15px;">
			<view style="width: 60vw;height: 5vh;display: flex;font-weight: bold;border-bottom: solid 1px #00BA0C;">
				<view style="font-size: 1rem;margin-left: 5vw; width: 10vw;line-height: 5vh;height: 5vh;">x</view>
				<view style="width: 45w; height: 5vh;line-height: 5vh;">请输入支付密码</view>
			</view>
			<view style="width: 60vw;height: 8vh;line-height: 8vh;text-align: center;">充值到零钱</view>
			<view
				style="width: 60vw;height: 10vh;line-height: 10vh;font-size: 1.1rem;font-weight: bold;text-align: center;">
				￥{{passwordList}}
			</view>
			<!-- 密码输入 -->
			<view style="width: 60vw; height: 5vh;margin-top: 1vh;display: flex;">
				<view style="width: 10vw;height: 5vh;border: solid 2px #ccc;text-align: center;line-height: 5vh;"
					v-for="(item,index) in passwordListZf" :key="index">
					{{item}}
				</view>
			</view>

		</view>


		<!-- 支付密码键盘 -->
		<uni-popup ref="popup1" type="center">
			<view
				style="width: 94vw;height: 50vh;background-color: #F1F1F1;margin-left: 3vw;border-radius: 10px;position: absolute;top: 50vh;">
				<!-- 标题 -->
				<view style="width: 94vw;height: 5vh;line-height: 5vh;display: flex;border-bottom: solid 1px #ccc;">
					<view style="width: 10vw;height: 5vh;line-height: 5vh;text-align: center;">x</view>
					<view style="width: 82vw;height: 5vh;line-height: 5vh;text-align: center;">请输入支付密码</view>
				</view>

				<!-- 忘记密码 -->
				<view style="width: 20vw;height: 3vh;margin-left: 70vw;font-size: 0.5rem;color: #007AFF;">忘记密码</view>
				<!-- 按键框 -->
				<view style="width: 94vw;height: 30vh;display: flex;flex-wrap: wrap;">
					<view @click="inputBtnzF(index)"
						style="height: 7vh;width: 30vw;border-bottom: solid 1px #ccc;border-right: solid 1px #ccc; text-align: center;line-height: 7vh;"
						v-for="(item,index) in passwordBtn" :key="index">
						{{item}}
					</view>

				</view>
			</view>
		</uni-popup>

		<!-- 待支付按钮 -->
		<view @click="dzf"></view>
		<!-- 待支付阴影 -->
		<uni-popup ref="popupdzf" type="center">

			<view
				style="width: 30vw;height: 20vh;color: #fff;text-align: center;line-height: 20vh; border-radius: 15px;background-color: #272727;position: absolute;top: 15vh;left: 35vw;">
				正在支付
			</view>
		</uni-popup>





	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 输入金额
				passwordList: '',
				passwordBtn: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '0', 'x'],
				// 支付密码判断
				isZfpassword: false,
				passwordListZf: [],
				time:2
			}
		},
		methods: {
			// 输入金额
			inputBtn(index) {
				if (index == 11) {
					this.passwordList = ''
				} else {
					this.passwordList += this.passwordBtn[index]
					console.log(this.passwordList)
				}

			},
			// 支付密码
			inputBtnzF(index) {
				if (index == 11) {
					this.passwordListZf.splice(this.passwordListZfZf.length - 1, 1)
				} else {
					if (this.passwordListZf.length !== 5) {
						this.passwordListZf.push(this.passwordBtn[index])
					} else {
						this.isZfpassword = false
						this.$refs.popup1.close('top')
						this.dzf()
						// 定时器
						let intervalId = setInterval(() => {
							this.time--
							if(this.time==0){
								clearInterval(intervalId)
								uni.redirectTo({
									url:'rechargesuccess/rechargesuccess?money='+this.passwordList
								})
							}
						}, 1000)

					}

				}
			},
			// 确认收货
			receiveBtn() {
				console.log(1)
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('top')
			},
			// 支付密码确定
			ZfpasswordBtn() {
				this.isZfpassword = true
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup1.open('top')
			},
			// 等待支付
			dzf() {
				this.$refs.popupdzf.open('top')
			}
		}
	}
</script>

<style>

</style>
